<template>
  <div class="data-serve-page">
    <div class="header bg f-c">
      <div class="nav-box f-s">
        <div class="header-content">
          <Navbar />
        </div>
      </div>
      <slot>
        <div class="nav-box2 f-g f-c j-a">
          <div class="f-c j-c a-c">
            <div class="title">数据服务</div>
            <div class="f-r a-c" style="height: 60px">
              <el-input v-model="searchParams.name" style="width: 600px">
                <el-button
                  slot="append"
                  style="width: 110px"
                  class="searchbtn"
                  type="primary"
                  @click="onSearch"
                >搜索</el-button>
              </el-input>
            </div>
          </div>
          <div class="count-box f-r j-b a-c">
            <div v-for="(item,index) in countList" :key="index" class="count-item">
              <div class="count">
                <CountTo
                  :start-val="0"
                  :end-val="item.value"
                  :duration="3000"
                />
              </div>
              <div class="count-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </slot>
    </div>
    <div class="body-box bg">
      <div class="body f-r">
        <div class="body-left">
          <el-input
            v-model="menuInput"
            style="margin-bottom: 20px"
            placeholder="请输入部门/主题名称"
            prefix-icon="el-icon-search"
          />
          <div class="menu-list">
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-submenu v-for="item in treeList" :key="item.code" :index="item.code">
                <template slot="title">
                  <i class="el-icon-location" />
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item v-for="subitem in item.children" :key="subitem.code" :index="subitem.code">
                  <template slot="title">
                    <span style="padding-left: 10px">{{ subitem.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </div>
        <div class="body-right f-g f-c">
          <el-card shadow="none">
            <div class="filter-box f-c j-b">
              <el-row v-for="item in categoryList" :key="item.key">
                <el-col :span="3"> {{ item.name }}：</el-col>
                <el-col v-for="v in item.list" :key="v.name" :span="5">
                  <span :style="{color: item.selectVal === v.value ? '#0052d9' : ''}" @click="handleSelect(item,v)">{{ v.name }}（{{ v.count }}） </span>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <div class="f-r a-c j-e sort-box">
            <span
              :style="{color: searchParams.order === 'subCount' ? '#0052d9' : ''}"
              @click="handleSort('subCount')"
            > <i class="el-icon-sort" />订阅次数 </span>
            <span
              :style="{color: searchParams.order === 'dataUpdateTime' ? '#0052d9' : ''}"
              @click="handleSort('dataUpdateTime')"
            > <i class="el-icon-sort" />更新时间 </span>
          </div>
          <div class="f-g card-list">
            <template />
            <el-card v-for="item in tableData" :key="item.id" shadow="none" class="hvr-grow">
              <div class="f-r a-c" style="position:relative;" @click="toDetail(item)">
                <div class="icpass3">
                  <div class="icpass4">{{ item.type === 'database' ? '数据库' : '接口' }}</div>
                  <img
                    class="imgicpass"
                    :src="item._src"
                  >
                </div>
                <div class="icpass33">
                  <div class="icpass331">
                    <div>{{ item.name }}</div>
                    <div class="icpass331-imgspan">
                      <img
                        src=""
                        alt=""
                      ><span />
                    </div>
                  </div>
                  <div class="posindex">
                    <div class="posindextion">
                      <img
                        src=""
                        alt=""
                      >
                      {{ item.shareTypeName }}
                    </div>
                    <div class="posindex1 posindextion">
                      <img
                        src=""
                        alt=""
                      >
                      {{ item.updateFreq }}
                    </div>
                    <div class="posindex1 posindextion">
                      <img
                        src=""
                        alt=""
                      >
                      {{ item.dataUpdateTime }}
                    </div>
                  </div>
                </div>
                <el-button type="primary" @click.stop="toSubscribe(item)">申请订阅</el-button>
              </div>
            </el-card>
          </div>
          <div class="page-box" style="padding-right: 0">
            <el-pagination
              background
              :current-page="pageNo"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalSize"
              @size-change="changePageSize"
              @current-change="changePageNo"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="db-container">
        <div class="footer-item">
          <div class="footer-text">主板：xxx市政务服务数据管理局</div>
          <div class="footer-text">技术支持单位：xxx市大数据资源管理中心</div>
          <div class="footer-text">运营：xxx市XXXX科技发展集团有限公司</div>
        </div>
        <div class="footer-item" style="justify-content: center">
          <div class="footer-text">粵ICP备10001213213号码-7</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../layout/navbar'
import crud from '@/mixins/crud'
import { http_shop, http_shop_server } from '@/api'
import { mapGetters } from 'vuex'
import CountTo from 'vue-count-to'
import { dict_shareTypeList } from '@/dict'
export default {
  name: 'Index',
  components: {
    Navbar,
    CountTo
  },
  computed: {
    ...mapGetters(['dict']),
    treeList() {
      console.log('this.dict[\'resource_attribute_type\']', this.dict['resource_attribute_type'])
      return this.dict['resource_attribute_type'] || []
    }
  },
  mixins: [crud],
  data() {
    return {
      request: http_shop_server,
      countList: [
        { name: '已发布', value: 0 },
        { name: '近期发布', value: 0 },
        { name: '已订阅', value: 0 }
      ],
      categoryList: [],
      searchParams: {
        name: '',
        orderAsc: true,
        order: ''
      },
      recordList: [
        { name: '数据治理' },
        { name: '数据汇聚' },
        { name: '城市治理' },
        { name: '公共服务' }
      ],
      searchValue: '',
      menuInput: ''
    }
  },
  created() {
    http_shop.countTotal({
      businessType: 'server'
    }).then(res => {
      this.countList[0].value = res.publishCount
      this.countList[1].value = res.recentPublishCount
      this.countList[2].value = res.subCount
    })
    http_shop_server.selectList().then(res => {
      this.categoryList = res.map(el => {
        return {
          ...el,
          selectVal: ''
        }
      })
    })
  },
  methods: {
    formatTableData(data) {
      data.forEach(v => {
        if (v.type === 'database') {
          v._src = require('@/assets/shop/database.png')
        } else if (v.type === 'api') {
          v._src = require('@/assets/shop/api.png')
        }
        const find = dict_shareTypeList.find(el => el.value === v.shareType)
        v.shareTypeName = find && find.name
      })
    },
    handleSelect(row, col) {
      row.selectVal = col.value
      this.initData()
    },
    handleSort(type) {
      if (type === this.searchParams.order) {
        this.searchParams.order = type
        this.searchParams.orderAsc = !this.this.searchParams.orderAsc
      } else {
        this.searchParams.order = type
        this.searchParams.orderAsc = true
      }
    },
    getQueryParams() {
      // 查询
      const params = {
        ...this.searchParams
      }
      this.categoryList.forEach(v => {
        params[v.key] = v.selectVal
      })
      return params
    },
    toSubscribe(item) {
      this.$router.push({
        path: '/shop-serve-subscribe-' + item.type + '/' + item.id
      })
    },
    toDetail(item) {
      this.$router.push({
        path: '/serve-publish/server-detail/publish/' + item.id + '/' + (item.auditRequestId || '')
      })
    }
  }
}
</script>

<style lang="scss">
.data-serve-page {
  .body-box {
    background: #e6ecf5;
    width: 100%;
  }
  .body {
    padding: 70px 0;
    width: 1400px;
    margin: 0 auto;
    .body-left {
      width: 320px;
      background-color: #ffffff;
      padding: 20px;
      margin-right: 30px;
    }
    .body-right {
      .card-list{
        .el-card {
          margin-top: 10px;
        }
      }
      .filter-box {
        height: 100px;
      }
      .sort-box {
        margin: 20px 0;
        > span{
          margin-left: 30px;
          cursor: pointer;
        }
      }
      .el-card {
        width: 100%;
        cursor: pointer;
      }
      .icpass3 {
        width: 120px;
        height: 120px;
        border-radius: 19px;
        background: #dde9f5;
        overflow: hidden;
        .icpass4 {
          position: absolute;
          color: #fff;
          width: 50px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          z-index: 99;
          font-size: 12px;
          overflow: hidden;
        }
        .imgicpass {
          width: 100%;
          height: 100%;
        }
      }
      .icpass33 {
        max-width: 878px;
        flex: 1;
        height: 120px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .icpass331 {
          display: flex;
          flex-direction: column;
          height: 70px;
          font-weight: 400;
          font-size: 18px;
          margin-top: 10px;
        }
        .icpass331-imgspan {
          width: 72%;
          font-size: 16px;
          margin-top: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .posindex {
        display: flex;
        color: #797979;
        justify-content: start;
        .posindextion {
          display: flex;
          font-size: 16px;
          align-items: center;
          img {
            margin-right: 5px;
          }
        }
        .posindex1 {
          margin-left: 80px;
        }
      }
      .el-button {
        border: 1px solid #3d72ff;
        border-radius: 5px;
        position: absolute;
        background-color: #3d72ff;
        width: 120px;
        height: 50px;
        font-size: 18px;
        right: 70px;
        top: 45px;
      }
    }
  }
  .footer {
    width: 100%;
    background: #e6ecf5;
    height: 100px;
    padding: 23px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .footer-item {
      width: 730px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .footer-text {
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
  .header {
    width: 100%;
    background-image: url("~@/assets/shop/head.jpg");
  }
  .nav-box {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  }
  .header-content {
    width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .nav-box2 {
    width: 1400px;
    height: 350px;
    margin: 0 auto;
    .el-input,
    .el-button {
      height: 60px;
      .el-input__inner {
        height: 60px;
        line-height: 60px;
      }
    }
    .title {
      font-size: 48px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      margin-bottom: 34px;
      font-style: oblique;
    }
    .record-list {
      height: 19px;
      cursor: pointer;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 21px;
      span {
        position: relative;
        padding-right: 40px;
      }
      span::after {
        position: absolute;
        content: " ";
        height: 16px;
        width: 1px;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin: 0 15px;
        background-color: #ffffff;
      }
      span:last-child:after {
        display: none;
      }
    }
    .el-input-group__append,
    .el-button {
      color: #ffffff !important;
      background-color: #0052d9 !important;
      border-color: #0052d9 !important;
    }
  }
  .count-box {
    margin: 0 auto;
    width: 750px;
    .count-item {
      .count {
        font-size: 36px;
        color: #fff;
        line-height: 36px;
        text-align: center;
      }
      .count-name {
        color: #cfd6e6;
        font-size: 18px;
        margin-top: 18px;
        text-align: center;
      }
    }
  }
}
</style>
